import 'package:basic_library/basic_library.dart';
import 'package:basic_library/src/widgets/pop_alert/pop_menu/pop_route.dart';
import 'package:basic_library/src/widgets/pop_alert/pop_menu/pop_up.dart';
import 'package:flutter/material.dart';

enum MenuDirection {
  horizontalLeft, // 水平左
  horizontalRight, // 水平左
  verticalTop, // 垂直上
  verticalBottom // 垂直下
}

///
/// 弹出菜单
///
class QMenuAlert extends StatefulWidget {
  /// 方向
  final MenuDirection menuDirection;

  /// 容器宽度
  final double? containerWidth;

  /// 子组件
  final Widget child;

  /// 菜单数组
  final List titles;

  /// 横向距离
  final double horizontalWidth;

  /// 点击回调
  final Function? tapCallback;

  const QMenuAlert({
    Key? key,
    required this.child,
    required this.titles,
    required this.horizontalWidth,
    this.menuDirection = MenuDirection.verticalTop,
    this.containerWidth,
    this.tapCallback,
  }) : super(key: key);

  @override
  _QMenuAlertState createState() => _QMenuAlertState();
}

class _QMenuAlertState extends State<QMenuAlert> {
  final GlobalKey _globalKey = GlobalKey();
  double _width = 0.0;

  @override
  void initState() {
    _init();
    super.initState();
  }

  _init() {
    if (widget.containerWidth == null) {
      _width = 110;
    } else {
      _width = widget.containerWidth!;
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return _buildWidget();
  }

  _buildWidget() {
    return GestureDetector(
      onTap: _showPopMenu,
      child: widget.child,
      key: _globalKey,
    );
  }

  _buildMenuWidget(bool isUp) {
    double height = ((44 + 13 * 2) * widget.titles.length + 13) / 2;
    if (widget.menuDirection == MenuDirection.horizontalLeft ||
        widget.menuDirection == MenuDirection.horizontalRight) {
      return Row(
        children: [
          // Image.asset("img/public_image/menu_up_arrow.png", height: 20.h, width: 40.w, fit: BoxFit.cover, color: const Color(KColors.color_10000000)),
          isUp
              ? Container()
              : Container(
                  width: 10,
                  height: 0,
                  decoration: const BoxDecoration(
                      border: Border(
                        // 四个值 top right bottom left
                        left: BorderSide(color: Color(0x10000000), width: 10),
                        top: BorderSide(color: Colors.transparent, width: 10),
                        bottom:
                            BorderSide(color: Colors.transparent, width: 10),
                      ),
                      boxShadow: [
                        BoxShadow(
                            color: Color(0x10000000),
                            offset: Offset(0, 2), // 阴影xy轴偏移量
                            blurRadius: 12, // 阴影模糊程度
                            spreadRadius: 2 // 阴影扩散程度
                            )
                      ]),
                ),
          Container(
            height: height,
            width: _width,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(5),
                boxShadow: const [
                  BoxShadow(
                      color: Color(0x10000000),
                      offset: Offset(0, 2), // 阴影xy轴偏移量
                      blurRadius: 12, // 阴影模糊程度
                      spreadRadius: 2 // 阴影扩散程度
                      )
                ]),
            child: ListView.builder(
              physics: const NeverScrollableScrollPhysics(), // 禁止滚动
              padding: const EdgeInsets.symmetric(vertical: 7),
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    if (widget.tapCallback != null) {
                      Navigator.pop(context);
                      widget.tapCallback!(index);
                    }
                  },
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 16, vertical: 7),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          widget.titles[index],
                          style: const TextStyle(
                              fontSize: 14, color: Color(0xFF41485D)),
                        )
                      ],
                    ),
                  ),
                );
              },
              itemCount: widget.titles.length,
            ),
          ),
          !isUp
              ? Container()
              : Container(
                  width: 10,
                  height: 0,
                  decoration: const BoxDecoration(
                      border: Border(
                        // 四个值 top right bottom left
                        right: BorderSide(color: Color(0x10000000), width: 10),
                        top: BorderSide(color: Colors.transparent, width: 10),
                        bottom:
                            BorderSide(color: Colors.transparent, width: 10),
                      ),
                      boxShadow: [
                        BoxShadow(
                            color: Color(0x10000000),
                            offset: Offset(0, 2), // 阴影xy轴偏移量
                            blurRadius: 12, // 阴影模糊程度
                            spreadRadius: 2 // 阴影扩散程度
                            )
                      ]),
                )
        ],
      );
    }
    return Column(
      children: [
        // Image.asset("img/public_image/menu_up_arrow.png", height: 20.h, width: 40.w, fit: BoxFit.cover, color: const Color(KColors.color_10000000)),
        isUp
            ? Container()
            : Container(
                width: 20,
                height: 0,
                decoration: const BoxDecoration(
                    border: Border(
                      // 四个值 top right bottom left
                      bottom: BorderSide(color: Color(0x10000000), width: 10),
                      right: BorderSide(color: Colors.transparent, width: 10),
                      left: BorderSide(color: Colors.transparent, width: 10),
                    ),
                    boxShadow: [
                      BoxShadow(
                          color: Color(0x10000000),
                          offset: Offset(0, 2), // 阴影xy轴偏移量
                          blurRadius: 12, // 阴影模糊程度
                          spreadRadius: 2 // 阴影扩散程度
                          )
                    ]),
              ),
        Container(
          height: height,
          width: _width,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5),
              boxShadow: const [
                BoxShadow(
                    color: Color(0x10000000),
                    offset: Offset(0, 2), // 阴影xy轴偏移量
                    blurRadius: 12, // 阴影模糊程度
                    spreadRadius: 2 // 阴影扩散程度
                    )
              ]),
          child: ListView.builder(
            physics: const NeverScrollableScrollPhysics(), // 禁止滚动
            padding: const EdgeInsets.symmetric(vertical: 7),
            itemBuilder: (context, index) {
              return GestureDetector(
                onTap: () {
                  if (widget.tapCallback != null) {
                    Navigator.pop(context);
                    widget.tapCallback!(index);
                  }
                },
                child: Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 16, vertical: 7),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        widget.titles[index],
                        style: const TextStyle(
                            fontSize: 14, color: Color(0xFF41485D)),
                      )
                    ],
                  ),
                ),
              );
            },
            itemCount: widget.titles.length,
          ),
        ),
        !isUp
            ? Container()
            : Container(
                width: 20,
                height: 0,
                decoration: const BoxDecoration(
                    border: Border(
                      // 四个值 top right bottom left
                      top: BorderSide(color: Color(0x10000000), width: 10),
                      right: BorderSide(color: Colors.transparent, width: 10),
                      left: BorderSide(color: Colors.transparent, width: 10),
                    ),
                    boxShadow: [
                      BoxShadow(
                          color: Color(0x10000000),
                          offset: Offset(0, 2), // 阴影xy轴偏移量
                          blurRadius: 12, // 阴影模糊程度
                          spreadRadius: 2 // 阴影扩散程度
                          )
                    ]),
              )
      ],
    );
  }

  _showPopMenu() {
    Rect rect = globalPaintBounds(_globalKey);
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    double boxHeight = (84 * widget.titles.length + 5 * 2) / 2;

    if (widget.menuDirection == MenuDirection.horizontalLeft ||
        widget.menuDirection == MenuDirection.horizontalRight) {
      if (rect.left > screenWidth / 2) {
        Navigator.push(
            context,
            PopRoute(
              child: Popup(
                menuDirection: widget.menuDirection,
                child: _buildMenuWidget(true),
                right: rect.right / 2 - rect.size.width - 10,
                top: rect.top - boxHeight / 4 - 10,
                onClick: () {},
              ),
            ));
      } else {
        Navigator.push(
            context,
            PopRoute(
              child: Popup(
                menuDirection: widget.menuDirection,
                child: _buildMenuWidget(false),
                left: rect.left + rect.size.width,
                top: rect.top - boxHeight / 4 - 10,
                onClick: () {},
              ),
            ));
      }
      return;
    }

    if (rect.top > screenHeight / 2) {
      Navigator.push(
          context,
          PopRoute(
            child: Popup(
              menuDirection: widget.menuDirection,
              child: _buildMenuWidget(true),
              left: rect.left - rect.size.width / 3 - widget.horizontalWidth,
              top: rect.top - boxHeight,
              onClick: () {},
            ),
          ));
    } else {
      Navigator.push(
          context,
          PopRoute(
            child: Popup(
              menuDirection: widget.menuDirection,
              child: _buildMenuWidget(false),
              left: rect.left - rect.size.width / 3 - widget.horizontalWidth,
              top: rect.top + 35,
              onClick: () {},
            ),
          ));
    }
  }
}
